@import 'base';

.container{
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

h1{
  display: inline-block;
  font: 8em 'MedievalSharp',cursive;
  font-weight: bold;
  letter-spacing: .2em;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: 2s ease-in-out;
  z-index: 5;
  &:hover{
    font-size: 20em;
    filter: blur(30px);
    text-shadow: 20px 20px 20px rgba(0,0,0,1);
    opacity: 0;
    &+img{
      transform: scale(1.2);
      filter: blur(0) contrast(1.1);
    }
  } 
}

img{
  width: 100%;
  height: 100%;
  filter: blur(20px) contrast(.95);
  transition: 2s ease-in-out;
}
